<template>
    <div v-if="loading"  class="loadEffect">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>
</template>
<script lang="ts">
import {Vue,Component} from 'vue-property-decorator'
//采用装饰器的方式 装饰一个 vue的组件
@Component
export default class Loading extends Vue{
    //data 元数据==类实例的属性
    loading:boolean = false

    //methods 方法 == 类内的实例方法
    start():void{//方法名是nuxtjs 约定好的
        this.loading = true;
    }
    finish():void{
        this.loading = false;

    }
}
// export default{
//     data:()=>({
//         loading:false
//     }),
//     methods:{
//         start(){//方法名是nuxtjs 约定好的
//             this.loading = true;
//         },
//         finish(){
//             this.loading = false;

//         }
//     }
// }
</script>
<style scoped>
.loadEffect{
            width: 100px;
            height: 100px;
            position: fixed;
            margin: 0 auto;
            margin-top:100px;
            left: 50%;
            top: 50%;
        }
        .loadEffect span{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #399;
            position: absolute;
            -webkit-animation: load 1.04s ease infinite;
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0.2;
            }
        }
        .loadEffect span:nth-child(1){
            left: 0;
            top: 50%;
            margin-top:-8px;
            -webkit-animation-delay:0.13s;
        }
        .loadEffect span:nth-child(2){
            left: 14px;
            top: 14px;
            -webkit-animation-delay:0.26s;
        }
        .loadEffect span:nth-child(3){
            left: 50%;
            top: 0;
            margin-left: -8px;
            -webkit-animation-delay:0.39s;
        }
        .loadEffect span:nth-child(4){
            top: 14px;
            right:14px;
            -webkit-animation-delay:0.52s;
        }
        .loadEffect span:nth-child(5){
            right: 0;
            top: 50%;
            margin-top:-8px;
            -webkit-animation-delay:0.65s;
        }
        .loadEffect span:nth-child(6){
            right: 14px;
            bottom:14px;
            -webkit-animation-delay:0.78s;
        }
        .loadEffect span:nth-child(7){
            bottom: 0;
            left: 50%;
            margin-left: -8px;
            -webkit-animation-delay:0.91s;
        }
        .loadEffect span:nth-child(8){
            bottom: 14px;
            left: 14px;
            -webkit-animation-delay:1.04s;
        }
</style>